<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css"> -->
    <link rel="stylesheet" href="script/bootstrap-3.3.7.min.css">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <script src="script/jquery-1.10.min.js"></script>

    <title>form 表单ajax提交 </title>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-12">
                    <div class="king-block king-block-bordered">
                        <div class="king-block-header king-gray-light">
                            <ul class="king-block-options">
                                <li>
                                    <button type="button"><i class="fa fa-cog"></i></button>
                                </li>
                            </ul>
                            <h3 class="king-block-title">填写个人信息</h3>
                        </div>
                        <div class="king-block-content">
                            <form class="form-horizontal" method="POST" id="form1" onsubmit="return false" action="##">
                                <div class="form-group">
                                    <label for="inputCount3" class="col-sm-3 control-label">帐号：</label>
                                    <div class="col-sm-7">
                                        <input type="text" class="form-control" id="inputCount3"
                                               placeholder="用户名/QQ号码/手机号码">
                                    </div>
                                    <span class="text-danger mt5 fl">*</span>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">邮箱：</label>
                                    <div class="col-sm-7">
                                        <input type="email" class="form-control" id="inputEmail3" placeholder="输入邮箱帐号">

                                    </div>
                                    <span class="text-danger mt5 fl">*</span>
                                </div>
                                <div class="form-group">
                                    <label for="inputPassword3" class="col-sm-3 control-label">密码：</label>
                                    <div class="col-sm-7">
                                        <input type="password" class="form-control" id="inputPassword3" placeholder="">
                                        <p class="help-block">6位以上，仅可由数字、字母、下划线组成</p>
                                    </div>
                                    <span class="text-danger mt5 fl">*</span>
                                </div>
                                <div class="form-group">
                                    <label for="inputEmail3" class="col-sm-3 control-label">地区：</label>
                                    <div class="col-sm-7">
                                        <select name="" id="" class="form-control">
                                            <option value="深圳">深圳</option>
                                            <option value="北京">北京</option>
                                            <option value="上海">上海</option>
                                            <option value="广州">广州</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-3">兴趣爱好：</label>
                                    <div class="col-sm-7">
                                        <div class="checkbox">
                                            <label class="mr10">
                                                <input type="checkbox" value="">运动
                                            </label>
                                            <label class="mr10">
                                                <input type="checkbox" value="">音乐
                                            </label>
                                            <label>
                                                <input type="checkbox" value="" disabled>上网（禁用）
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-sm-3">性别：</label>
                                    <div class="col-sm-7">
                                        <div class="radio">
                                            <label class="mr10">
                                                <input type="radio" name="optionsRadios" id="optionsRadios1" value=""
                                                       checked>男
                                            </label>
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="">女
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group has-feedback">
                                    <label class="control-label col-sm-3" for="introduction">个人说明：</label>
                                    <div class="col-sm-7">
                                        <textarea class="form-control" rows="3" id="introduction"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-7 col-sm-offset-3">
                                        <input type="button" class="king-btn king-success mr10" onclick="submit11()"
                                               value="提交"/>
                                        <input type="reset" class="king-btn king-default" value="取消"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function submit11() {
// 只获取 个人说明 ，打成json
        console.log($('#introduction').val())
        var serializeObj = {};
        serializeObj["shuoming"] = $('#introduction').val()
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "http://127.0.0.1:8080/test/",//url
            headers: {Accept: "application/json", "Content-Type": "application/json"}, // todo 这里不加，服务端用form 方式读取参数
            data: JSON.stringify(serializeObj),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.resultCode == 200) {
                    alert("SUCCESS");
                }
                ;
            },
            error: function () {
                alert("异常！");
            }
        });
    }
</script>
</body>
</html>